<template>
  <div>
    <router-view></router-view>
    <div v-if="this.$route.name === '软件审核'">
      <div class="el">
        <!-- <el-button type="primary" @click="addUser">添加举报信息</el-button> -->
        <el-button type="text" @click="dealedMsg()"
          >查看不通过软件信息</el-button
        >
        <!-- <el-button type="text" @click="dealMsg()">查看未处理举报信息</el-button> -->
      </div>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="app_name" label="姓名"> </el-table-column>
        <el-table-column prop="app_size" label="大小"> </el-table-column>
        <el-table-column prop="versions_number" label="版本号">
        </el-table-column>
        <el-table-column prop="app_state" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.app_state === 0 ? '待审核' : '已上架' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
        <el-table-column prop="operate" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="viewDetails(scope.$index, scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改 -->
      <el-dialog
        class="dialog"
        title="修改信息"
        :visible.sync="dialogVisible"
        :show-close="false"
        :before-close="handleEdit"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="radio" label="状态">
            <el-radio-group v-model="ruleForm.radio">
              <el-radio :label="0">待审核</el-radio>
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="3">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="ruleForm.remarks"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="escButton()">取消</el-button>
          <el-button @click="changeUser()" type="primary">修改</el-button>
        </div>
      </el-dialog>
      <!-- 详细信息 -->
      <el-dialog
        class="dialog"
        :visible.sync="hide"
        :show-close="false"
        :before-close="viewDetails"
      >
        <div class="box">
          <div class="left">
            <span class="base">基础信息</span><br /><br />
            <span>应用ID：{{ select.app_id }}</span
            ><br />
            <span>应用名称：{{ select.app_name }}</span
            ><br />
            <span>应用评分：{{ select.app_score }}</span
            ><br />
            <span>应用大小：{{ select.app_size }}</span
            ><br />
            <span
              >应用状态：<span v-if="select.app_state === 1">上架</span>
              <span v-if="select.app_state === 2">下架</span></span
            >
            <br />
            <span>应用标签：{{ select.app_label }}</span
            ><br />
            <span>当前版本号：{{ select.versions_number }}</span
            ><br />
            <span>应用下载次数：{{ select.app_downloding_times }}</span
            ><br />
            <span>处理时间：{{ select.processing_date }}</span
            ><br />
          </div>
          <div class="right"></div>
        </div>
        <div class="box-1">
          <p class="base">应用简介</p>
          <div class="box-1-1">{{ select.app_about }}</div>
        </div>
        <div class="box-1">
          <p class="base">应用详情</p>
          <div class="box-1-1">{{ select.app_presentation }}</div>
        </div>
        <div class="box-1">
          <p class="base">版本特性介绍</p>
          <div class="box-1-1">{{ select.app_edition }}</div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="escView()">取消</el-button>
          <el-button @click="confirmButton()" type="primary">确定</el-button>
        </div>
      </el-dialog>
      <!-- 分页器 -->
      <el-pagination
        @current-change="changePage"
        v-show="shows"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        background
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import http from '../api/index';
export default {
  data() {
    return {
      list: [],
      currentPage: 1,
      pageSize: 1,
      shows: true,
      total: 0,
      activeName: '',
      msg: '',
      id: '',
      status_id: '',
      app_id: '',
      appId: 1,
      remarks: '',
      show: true,
      show1: false,
      dialogVisible: false,
      hide: false,
      gameList: [],
      tableData: [],
      selectList: [],
      select: {
        app_id: '', //appid
        app_name: '',
        app_score: '',
        app_size: '',
        app_state: '',
        app_label: '',
        versions_number: '',
        app_downloding_times: '',
        processing_date: '',
        app_about: '',
        app_presentation: '',
        app_edition: '', //版本介绍
      },
      ruleForm: {
        radio: '',
        remarks: '',
      },
      rules: {
        radio: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    http
      .getCheckedSoft({
        pages: 1,
      })
      .then((r) => {
        console.log(r);
        this.list = r.data;
        this.total = parseInt(r.msg);
      });
  },
  methods: {
    //  不通过软件信息
    dealedMsg() {
      this.$router.push('/index/check/checkSoft/checkErr');
    },
    // 详情
    viewDetails(index, row) {
      this.hide = true;
      console.log(row);
      this.select.app_id = row.app_id;
      this.select.app_name = row.app_name;
      this.select.app_score = row.app_score;
      this.select.app_size = row.app_size;
      this.select.app_state = row.app_state;
      this.select.app_label = row.app_label;
      this.select.versions_number = row.versions_number;
      this.select.app_downloding_times = row.app_downloding_times;
      this.select.processing_date = row.processing_date;
      this.select.app_about = row.app_about;
      this.select.app_presentation = row.app_presentation;
      this.select.app_edition = row.app_edition;
    },
    // 取消查看详情
    escView() {
      this.hide = false;
    },
    // 确定详情
    confirmButton() {
      this.hide = false;
    },
    // 分页
    changePage(val) {
      http
        .getCheckedSoft({
          pages: val,
        })
        .then((r) => {
          console.log(r);
          this.list = r.data;
          this.total = parseInt(r.msg);
        });
    },
    // 修改成功
    changeUser() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .changeGameStatus({
              app_id: this.app_id,
              app_state: this.ruleForm.radio,
              remarks: this.remarks,
            })
            .then((r) => {
              console.log(r);
              http
                .getCheckedSoft({
                  pages: this.currentPage,
                })
                .then((r) => {
                  console.log(r);
                  this.list = r.data;
                  this.total = parseInt(r.msg);
                });
            });
          console.log(this.app_id);
          console.log(this.ruleForm.radio);
          this.dialogVisible = false;
        }
      });
    },
    // 取消修改
    escButton() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
      // this.dialogFormVisible = false;
    },
    // 修改
    handleEdit(index, row) {
      console.log(row);
      this.app_id = row.app_id;
      this.ruleForm.radio = row.app_state;
      console.log(this.ruleForm.radio);

      // this.ruleForm.remarks = row.remarks;
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
.el-input {
  width: 400px;
}
.div1 {
  width: 100%;
  position: sticky;
  top: 100px;
  z-index: 0;
}
.el-card {
  width: 600px;
  margin-left: 86px;
  margin-top: 20px;
}
.base {
  color: rgb(89, 89, 241);
  font-size: 20px;
  margin-top: 16px;
}
.box {
  margin-top: -50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left {
  width: 250px;
  border: 1px solid;
}
.right {
  width: 250px;
  border: 1px solid;
}
.box-1-1 {
  margin-left: 15px;
  width: 100%;
  /* border: 1px solid; */
}
</style>